<template>
  <div class="SearchProduct">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" title="综合" disabled />
      <van-dropdown-item v-model="value2" :options="option2" title="价格" @change="priceChange" />
      <van-dropdown-item v-model="categoryVal" :options="filterCategory" title="分类" @change="categoryChangeSearch" />
    </van-dropdown-menu>
    <Products :goodsList="GoodsListData.data" />
  </div>
</template>

<script>
import Products from "@/components/Products";

export default {
  name: "Products.vue",
  props: ["GoodsListData", 'filterCategory'],
  components: {
    Products,
  },

  data() {
    return {
      value1: 0,
      value2: "asc",
      categoryVal: 0,
      option1: [
        { text: "全部", value: 0 },
        { text: "居家", value: 1 },
      ],
      option2: [
        { text: "价格由低到高", value: "asc" },
        { text: "价格由高到低", value: "desc" },
      ],
    };
  }, 
  methods: {
    /// 子组件调用父组件 价格
    priceChange(value) {
      
      this.$emit("priceChange",value);
    },
    // 子组件调用 父组件 分类
    categoryChangeSearch(value) {
      
      this.$emit("categoryChangeSearch",value);
    },
    //商品选中就跳转到商品详情
    handleClick(val) {
      this.$router.push(`/productDetail?id=${val}`)
     
    },
  },
};
</script>

<style scoped lang="less">
.SearchProduct {
  height: 100%;
  background-color: #efefef;
}
</style>
